<template>
  <div style="position:fixed;top:0;width:100%;z-index:999">
    <header class="yd-navbar navbar-bottom-line-color"
            style="height: 1rem;">
      <div class="yd-navbar-item" v-if="lfurl">
        <a :href="lfurl" class="">
          <span><i class="yd-back-icon" style="color: rgb(255, 255, 255);"></i></span>
        </a>
      </div>
      <div class="yd-navbar-center-box" style="height: 1rem;">
        <div class="yd-navbar-center">
          <span class="yd-navbar-center-title" style="color: rgb(255, 255, 255); font-size: 0.4rem;">{{title}}</span>
        </div>
      </div>
      <div class="yd-navbar-item" v-if="rgtxt" @click="handleTxt">
        <span v-if="rgtxt" v-text="rgtxt" style="color: rgb(255, 255, 255);"></span>
      </div>
      <div class="yd-navbar-item" v-if="rgicon" @click="handleRgicon">
        <span v-if="rgicon"><i :class="showrgicon" style="font-size: 0.4rem; color: rgb(255, 255, 255);"></i></span>
      </div>
    </header>
  </div>
</template>


<script>
	export default{
		props: {
			title: String,
      lfurl: String,
      rgurl: String,
      rgtxt: String,
      rgicon: String
		},
	  data () {
	    return{
	      showrgicon: ''
	    }
	  },
    methods: {
      handleTxt () {
        this.$emit('handle-txt')
      },
      handleRgicon () {
        this.$emit('handle-rgicon')
      }
    },
		mounted() {
		  this.showrgicon = `yd-icon-${this.rgicon}`
		},
		components: {
		}
	}
</script>

<style>
.navbar-bottom-line-color {
  background-color: rgb(72, 112, 243);
}
</style>
